<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>上传简历</title>
  <link rel="stylesheet" href="1.css">

<body>
  <div class="container">
    <div class="left-panel">
      <h1 class="main-title">Finish!<br>Upload Your Resume</h1>
      <p class="main-desc">Upload your resume, the platform will help you parse and optimize, you can also skip this
        step</p>
      <div class="main-illustration">
        <img src="imgs/f3b98a45b95147719af263d1e992460c384c379e.png" alt="cat illustration" />
      </div>
    </div>
    <main class="upload-panel">
      <h2 class="upload-title">Upload file</h2>
      <div class="upload-box">
        <label class="upload-area" for="fileInput">
          <div class="upload-icon">
            <!-- 云朵SVG图标 -->
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
              <path d="M30 28a6 6 0 0 0-1.2-11.9A8 8 0 1 0 8 23.5" stroke="#1890FF" stroke-width="2" fill="none" />
              <path d="M20 16v10" stroke="#1890FF" stroke-width="2" stroke-linecap="round" />
              <path d="M16 22l4 4 4-4" stroke="#1890FF" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
          </div>
          <div class="upload-tip">Drag your resume file to this area, or click on the area to select the appropriate
            file to upload</div>
          <input id="fileInput" type="file" class="upload-input" style="display:none" />
        </label>
        <div class="file-name" id="fileName"></div>
      </div>
      <div class="button-group">
        <button class="btn btn-secondary">Last step</button>
        <button class="btn btn-primary">Finish</button>
      </div>
      <div class="step-indicator">
        <div class="step completed">
          <svg class="checkmark" viewBox="0 0 14 14">
            <polyline points="3,7 6,10 11,4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" />
          </svg>
        </div>
        <div class="step active">2</div>
        <div class="step">3</div>
        <div class="step-indicator-line"></div>
        <div class="step-indicator-line-active" style="width: 33.3%;"></div>
      </div>
    </main>
  </div>
  <script>
    // 显示上传文件名
    document.querySelector('.upload-input').addEventListener('change', function (e) {
      const fileName = e.target.files[0] ? e.target.files[0].name : '';
      document.getElementById('fileName').textContent = fileName;
      // 上传后切换进度条到第2步
      setStep(1);
    });

    // 步骤进度条切换，支持多步
    function setStep(step) {
      const steps = document.querySelectorAll('.step-indicator .step');
      steps.forEach((el, idx) => {
        el.classList.remove('completed', 'active');
        el.innerHTML = idx + 1; // 先重置内容为数字
        if (idx < step) {
          el.classList.add('completed');
          el.innerHTML = '<svg class="checkmark" viewBox="0 0 14 14"><polyline points="3,7 6,10 11,4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>';
        } else if (idx === step) {
          el.classList.add('active');
        }
      });
      // 横线进度
      const activeLine = document.querySelector('.step-indicator-line-active');
      if (activeLine) {
        activeLine.style.width = (step / (steps.length - 1)) * 100 + '%';
      }
    }
    // 页面初始进度
    setStep(0);
  </script>
</body>

</html>